<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mock拦截Axios请求-返回函数</title>
</head>

<body>
    <script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.1-beta3/mock-min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <h2>F12打开控制台查看数据，效果更佳</h2>

    <div id="Application">

        <h2>调用Mock生成的数据</h2>
        <h4>调用生成的人员数据</h4>
        我是名字是：{{list.name}}<br />
        我的年龄是：{{list.age}}
    </div>
    <script>


        let Random = Mock.Random;



        const App = Vue.createApp({
            setup() {

                //拦截Axios
                Mock.mock('/api/sign/out', 'get', (options) => {
                    console.log(options, "配置选项");
                    return {
                        status: 200,
                        message: 'success',
                        code: 0,
                        data: {
                            name: Random.cname(),
                            age: Random.integer(20, 30,),

                        }
                    }
                })





                let list = Vue.ref("");
                // 请求代码如下
                axios.get('/api/sign/out')
                    .then(function (response) {
                        console.log(response.data.data, "拿到的值");
                        list.value = response.data.data;
                    })



                //展示数据
                console.table(list);


                return { list }
            }
        })

        App.mount("#Application")
    </script>
</body>

</html>